<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css模板</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/doc.min.css">
    <link rel="stylesheet" href="../static/css/css.css">
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/popper.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
</head>
<body>
<div id="header" class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"></div>
<div class="container-fluid">
    <div class="row flex-xl-nowrap">
        <div class="col-md-3 col-xl-2 bd-sidebar">
            <nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation">
            </nav>
        </div>

        <nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
            <!--            <ul class="section-nav">-->
            <!--                <li class="toc-entry toc-h2"><a href="#examples">Examples</a>-->
            <!--                    <ul>-->
            <!--                        <li class="toc-entry toc-h3"><a href="#link-color">Link color</a></li>-->
            <!--                        <li class="toc-entry toc-h3"><a href="#additional-content">Additional content</a></li>-->
            <!--                        <li class="toc-entry toc-h3"><a href="#dismissing">Dismissing</a></li>-->
            <!--                    </ul>-->
            <!--                </li>-->
            <!--                <li class="toc-entry toc-h2"><a href="#javascript-behavior">JavaScript behavior</a>-->
            <!--                    <ul>-->
            <!--                        <li class="toc-entry toc-h3"><a href="#triggers">Triggers</a></li>-->
            <!--                        <li class="toc-entry toc-h3"><a href="#methods">Methods</a></li>-->
            <!--                        <li class="toc-entry toc-h3"><a href="#events">Events</a></li>-->
            <!--                    </ul>-->
            <!--                </li>-->
            <!--            </ul>-->
            <p>其它东西</p>
        </nav>


        <main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
            <h1 class="bd-title" id="title">Alerts</h1>
            <p class="bd-lead" id="about">Provide contextual feedback messages for typical user actions with the handful of
                available and flexible alert messages.</p>

            <div class="bd-example" id="iframe">
                <iframe src="loadPage/load1/index.html"  height="450px" width="100%"></iframe>
            </div>
            <div class=" bd-example center" style="margin-bottom: 0" id="selectBack">
                <button type="button" class="btn btn-outline-warning" onclick="changeColor(this,'cssCodeBox')" >Css样式</button>
                <button type="button" class="btn btn-outline-primary" onclick="changeColor(this,'htmlCodeBox')" >Html</button>
                <button type="button" class="btn btn-outline-success" onclick="changeColor(this,'jsCodeBox')" >JavaScript</button>
            </div>

            <figure class="highlight collapse" id="cssCodeBox" style="margin-top: 0">

                <pre>
                    <code class="language-css " data-lang="css" id="css">
                    </code>
                </pre>
            </figure>
            <figure class="highlight collapse" id="htmlCodeBox" style="margin-top: 0">

                <pre>
                    <code class="language-html " data-lang="html" id="html">
                    </code>
                </pre>
            </figure>

            <figure class="highlight collapse" id="jsCodeBox" style="margin-top: 0">

                <pre>
                    <code class="language-js " data-lang="js" id="js">
                    </code>
                </pre>
            </figure>




        </main>
    </div>
</div>
</body>
<script src="../static/js/css.js"></script>
</html>
